<template>
    <div class="blog_view">
        <div class="top my_box_shadow">
            <div class="img_container">
                <img 
                    alt="一篇文字"
                    src="https://file.dumogu.top/blog_page_banner.jpg?imageView2/0/q/75">
            </div>
            <div class="mine_container">
                <div class="one">
                    <img 
                        alt="一篇文字"
                        src="https://file.dumogu.top/blog_mine.jpg?imageView2/1/w/300/h/300/q/75">
                </div>
                <div class="two">
                    <Mine></Mine>
                </div>
                <a class="three" target="_blank" href="https://weibo.com/7438796191/profile?rightmod=1&wvr=6&mod=personinfo&is_all=1">
                    微博
                </a>
            </div>
        </div>
        <div class="left">
            <BlogItem 
                v-for="(item,index) in blogList" 
                :key="index"
                :blogData="item"
                :show="index%2!=1">
            </BlogItem>
            <div class="bottom_bt">
                <div class="last_bt" @click="onLast" v-if="lastBtShow">
                    上一页
                </div>
                <div class=" next_bt" @click="onNext" v-if="blogList.length>0 && nextBtShow">
                    下一页
                </div>
            </div>
        </div>
        <div class="right">
            <MoreBlog></MoreBlog>
        </div>
        <LoadingCp
            :loading="loading">
        </LoadingCp>
    </div>
</template>
<script>
//博客列表展示页面
import BlogItem from "@/components/blog/BlogItem.vue"
import Mine from "@/components/blog/Mine.vue"
import MoreBlog from "@/components/blog/MoreBlog.vue"
import {startRollToEndTwo} from '~/common/OtherTools'   //导入发爬虫字段生成函数
import LoadingCp from '@/components/public/LoadingCp'
export default { 
    name:"Blog",
    layout: 'default',
    components:{
        BlogItem,
        Mine,
        MoreBlog,
        LoadingCp,
    },
    head(){
        return {
            title: "吴掌柜的博客 - 一篇文字",
            meta: [
                {
                    name: "keywords",
                    content: "博客,一篇文字",
                }
            ],
        }
    },
    data(){ 
        return{
            blogList:[],
            page:1,
            loading:false,
            nextBtShow:true, //控制下一篇按钮是否显示
            lastBtShow:true, //控制上一篇按钮是否显示
        }
    },
    async asyncData ({$axios,route}){
        if(process.client) return;
        let page = route.params.page || 1;
        if(page<1) return;
        return $axios.$Api.getBlogs({
            page:page,
        }).then(data=>{
            return {
                blogList:data.dataList,
                page:data.page,
            };
        }).catch(()=>{
            return {
                blogList:[],
                page:1,
            };
        });
    },
    watch:{
        page:{
            handler(){
                if(this.page<=1){
                    this.lastBtShow=false;
                }else{
                    this.lastBtShow=true;
                }
            },
            immediate: true,
        },
        blogList(){
            if(this.blogList.length==0){
                this.nextBtShow=false;
            }else{
                this.nextBtShow=true;
            }
        },
    },
    activated(){  //在页面被激活时写入当前页数
        if(!this.page) return;
        window.history.pushState("", "", '/blog/'+this.page); //改变路由但不刷新页面
    },
    created(){
        if (!process.client) return;
        if(this.blogList.length>0) return;
        this.getBlogs();
    },
    methods:{
        getBlogs(){
            window.history.pushState("", "", '/blog/'+this.page); //改变路由但不刷新页面
            if(this.page<1) return;
            this.loading=true;
            startRollToEndTwo();
            this.$axios.$Api.getBlogs({
                page:this.page,
                size:7,
            }).then(data=>{
                this.blogList = data.dataList;
                this.page = data.page;
            }).catch(()=>{
                return;
            }).finally(()=>{
                this.loading = false;
            });
        },
        onLast(){ //上一篇点击事件
            if(this.page<=1) return;
            this.page--;
            this.getBlogs();
        },
        onNext(){ //下一篇点击事件
            this.page++;
            this.getBlogs();
        },
    },
}
</script>
<style lang='scss' scoped>
.blog_view{
    width: 100%;
    display: grid;
    grid-gap:5rem;
    grid-template-columns: 1fr 240px;
    grid-template-rows: min-content;
    grid-auto-flow: row dense;
    margin: 3rem 0;
    grid-template-areas:
        "top top"
        "left right";
    >.top{
        grid-area: top;
        background-color: white;
        >.img_container{
            img{
                width: 100%;
                height: 300px;
                border-radius: 0.2rem;
                object-fit: cover;
                object-position: center;
            }
        }
        >.mine_container{
            display: grid;
            grid-gap:30px;
            grid-template-columns: min-content 1fr min-content;
            grid-template-rows: min-content;
            grid-auto-flow: row dense;
            >.one{
                padding: 7px;
                margin-top: -30px;
                margin-left: 30px;
                border-radius: 2px;
                background-color: white;
                img{
                    width:150px;
                    height: 150px;
                    border-radius: 0.2rem;
                    object-fit: cover;
                    object-position: center;
                }
            }
            >.two{
                padding: 15px 0;
            }
            >.three{
                border-radius: 2px;
                width: 80px;
                height: fit-content;
                background-color: #ff2d2d;
                margin-top: 15px;
                color: white;
                font-size: 17px;
                margin-right: 15px;
                text-align: center;
                padding: 10px 0;
                line-height: 1;
                cursor: pointer;
                box-shadow: inset 0px 0px 5px 1px rgba(57, 19, 19, 0.42), 0px 0px 0 rgba(127,127,127,.1);
            }
        }
    }
    >.left{
        grid-area: left;
        height: fit-content;
        display: grid;
        grid-gap:60px;
        grid-template-columns: 1fr;
        >.bottom_bt{
            width:100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: fit-content;
            >div{
                cursor: pointer;
                padding: 10px 20px;
                background-color: white;
                border-radius: 2px;
                font-size: 13px;
                font-weight: bold;
                margin-left:15px;
                border: 1px solid #e3e8eb;
            }
        }
    }
    >.right{
        grid-area: right;
        height: fit-content;
        position: sticky;
        top:0;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 30px;
        grid-template-rows: min-content min-content;
    }
}
</style>